<template>
  <Main>
    <template #main-search>
      <el-input
          style="width: 200px"
          v-model="name"
          size="large"
          placeholder="请输入菜品名称"
          @keyup.enter="searchTableData"
          :prefix-icon="Search"
      />
    </template>
    <template #main-action>
      <div class="actions">
        <el-link type="danger" :underline="false" @click="removeMore">批量删除</el-link>
        <el-link type="primary" :underline="false" @click='changeStatusMore(1)'>批量启售</el-link>
        <el-link type="danger" :underline="false" @click='changeStatusMore(0)'>批量停售</el-link>
        <el-button :icon="Plus" @click="addDishs" type="warning" size="large">新建菜品</el-button>
      </div>
    </template>
    <template #table>
      <GTable :data="tableData"
              :isSelection="true"
              :loading="loading"
              @prevClick="prevClick"
              @nextClick="nextClick"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
              @handleSelectionChange="handleSelectionChange"
              :total="total"
              :columns="columns">
        <template #price="{ row }">
          <span>{{ '￥' + row.price }}</span>
        </template>
        <template #status="{ row }">
          <el-tag v-if="row.status === 1" type="success">启售</el-tag>
          <el-tag v-else type="danger">停售</el-tag>
        </template>
        <template #updateTime="{ row }">
          <span v-if="row.updateTime">
            {{ row.updateTime.split('T')[0] + ' ' + row.updateTime.split('T')[1] }}
          </span>
        </template>
        <template #image="{ row }">
          <el-image
              style="width: 50px; height: 50px"
              :src="`${API_URL}/dingdang/${row.image}`"
              :preview-src-list="[`${API_URL}/dingdang/${row.image}`]"
              fit="cover"
              :preview-teleported="true"
              >
          </el-image>
        </template>
        <template #general="{ row }">
          <el-button round size="small" type="primary" @click="editDishs(row)">修改</el-button>
          <el-button round size="small" type="warning" @click="changeStatus(row)">
            {{ row.status === 1 ? '停售' : '启售' }}</el-button>
          <el-button round size="small" type="danger" @click="removeOne(row)">删除</el-button>
        </template>
      </GTable>
    </template>
  </Main>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { API_URL } from '../../hooks/request/const';
import { useDishesTableData } from './useDishesTableData';
// 菜品名称检索字段
const name = ref(null);
const router = useRouter();
const {
  columns,
  tableData,
  total,
  prevClick, nextClick, sizeChange, currentChange, handleSelectionChange, getTableData, removeOne, removeMore, changeStatus,
  changeStatusMore,loading
} = useDishesTableData();
function searchTableData() {
  getTableData({ name: name.value });
}
function addDishs() {
  router.push({ path: 'foodManagment/detail', query: { page: 'add' } });
}
function editDishs(row) {
  router.push({ path: 'foodManagment/detail', query: { page: 'edit', id: row.id } });
}
watch(router.currentRoute, (newValue) => {
  newValue.name === 'foodManagment' && !newValue.query.page && getTableData();
});
</script>

<style scoped lang="css">
.actions {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
